<template>
    <div class="index-lists">
        <el-card class="!border-none" shadow="never">
            <el-form
                ref="formRef"
                class="mb-[-16px]"
                :model="queryParams"
                :rules="formRules"
                :inline="true"
            >
                <el-form-item label="提案号" prop="proposition">
                    <el-input class="w-[200px]" v-model="queryParams.proposition" />
                </el-form-item>
                <el-form-item label="提案名称" prop="proposalName">
                    <el-input class="w-[200px]" v-model="queryParams.proposalName" />
                </el-form-item>
                <el-form-item label="客户名称" prop="clientName">
                    <el-select
                        class="w-[200px]"
                        v-model="queryParams.clientName"
                        filterable
                        @change="handleClientName"
                    >
                        <el-option
                            v-for="item in optionNames"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="信誉等级" prop="reputationGrade">
                    <el-select v-model="queryParams.reputationGrade" class="w-[200px]" clearable>
                        <el-option label="高" value="1" />
                        <el-option label="中" value="2" />
                        <el-option label="低" value="3" />
                    </el-select>
                </el-form-item>
                <el-form-item label="业务人员" prop="businessPersonnel">
                    <el-select v-model="queryParams.businessPersonnel" class="w-[200px]" clearable>
                        <el-option label="流程01" value="1" />
                        <el-option label="流程02" value="2" />
                    </el-select>
                </el-form-item>
                <el-form-item label="业务助理" prop="businessAssistant">
                    <el-select v-model="queryParams.businessAssistant" class="w-[200px]" clearable>
                        <el-option label="代理01" value="1" />
                        <el-option label="代理02" value="2" />
                    </el-select>
                </el-form-item>
                <el-form-item label="内部安源人" prop="internalSecurityPeople">
                    <el-input class="w-[200px]" v-model="queryParams.internalSecurityPeople" />
                </el-form-item>
                <el-form-item label="案件类型" prop="caseType">
                    <el-select v-model="queryParams.caseType" class="w-[200px]" clearable>
                        <el-option label="版权" value="1" />
                    </el-select>
                </el-form-item>

                <el-form-item label="第二案源人" prop="secondCaseSource">
                    <el-input class="w-[200px]" v-model="queryParams.secondCaseSource" />
                </el-form-item>
                <el-form-item label="外部案源人" prop="externalCaseSource">
                    <el-input class="w-[200px]" v-model="queryParams.externalCaseSource" />
                </el-form-item>

                <el-form-item label="检索人" prop="searchman">
                    <el-input class="w-[200px]" v-model="queryParams.searchman" />
                </el-form-item>
                <el-form-item label="检索时间" prop="searchTime">
                    <el-date-picker
                        v-model="queryParams.searchTime"
                        type="datetime"
                        clearable
                        value-format="YYYY-MM-DD hh:mm:ss"
                        placeholder="请选择检索时间"
                    />
                </el-form-item>

                <el-form-item label="有无技术交底书" prop="isTechnicalDisclosure">
                    <el-radio-group v-model="radio2" class="ml-4">
                        <el-radio label="1" size="large">有</el-radio>
                        <el-radio label="2" size="large">无</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item style="margin-left: 80px" label="是否为线上下单" prop="isBopis">
                    <el-radio-group v-model="radio1" class="ml-4">
                        <el-radio label="1" size="large">是</el-radio>
                        <el-radio label="2" size="large">否</el-radio>
                    </el-radio-group>
                </el-form-item>
                <div>
                    <div style="display: flex; border: 1px solid #f2f2f2">
                        <div class="namebox">
                            <span style="color: #ff0000">*</span>
                            <span style="white-space: nowrap">客户联系人</span>
                        </div>
                        <div style="padding: 10px; width: 86%">
                            <span style="padding: 10px">选择联系人</span>
                            <el-button
                                v-perms="['linkman:add']"
                                size="small"
                                type="primary"
                                @click="linkmanAdd()"
                            >
                                <template #icon>
                                    <icon name="el-icon-Plus" />
                                </template>
                                新增联系人
                            </el-button>
                            <div style="padding: 0px 10px">
                                <el-checkbox-group
                                    v-model="queryParams.customerContactid"
                                    @change="changeLinkman"
                                >
                                    <el-checkbox
                                        v-for="item in linkmanData"
                                        :label="item.id"
                                        size="large"
                                        >{{ item.name }}</el-checkbox
                                    >
                                </el-checkbox-group>
                            </div>
                            <el-table class="mt-4" size="large" :data="likemanTableData" stripe>
                                <el-table-column label="名称" prop="name" min-width="140" />
                                <el-table-column label="联系人类别" prop="type" min-width="150" />
                                <el-table-column label="座机" prop="number" min-width="140" />
                                <el-table-column label="电话" prop="phone" min-width="140" />
                                <el-table-column label="email" prop="email" min-width="140" />
                                <el-table-column
                                    label="联系地址"
                                    prop="workAddress"
                                    min-width="140"
                                />
                                <el-table-column label="操作" width="120" fixed="right">
                                    <template v-slot="scope">
                                        <el-button
                                            @click="
                                                moveRow(
                                                    likemanTableData,
                                                    scope.row,
                                                    scope.$index,
                                                    'up'
                                                )
                                            "
                                            size="mini"
                                            type="text"
                                            :icon="Top"
                                            :disabled="scope.$index === 0"
                                        >
                                        </el-button>
                                        <el-button
                                            @click="
                                                moveRow(
                                                    likemanTableData,
                                                    scope.row,
                                                    scope.$index,
                                                    'down'
                                                )
                                            "
                                            size="mini"
                                            type="text"
                                            :icon="Bottom"
                                            :disabled="scope.$index === likemanTableData.length - 1"
                                        >
                                        </el-button>
                                        <el-button type="danger" link @click="handleAdd()">
                                            <template #icon>
                                                <el-icon>
                                                    <Close />
                                                </el-icon>
                                            </template>
                                        </el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                    </div>
                </div>
                <div>
                    <div style="display: flex; border: 1px solid #f2f2f2">
                        <div class="namebox">
                            <span style="white-space: nowrap">申请人</span>
                        </div>
                        <div style="padding: 10px; width: 85%">
                            <span style="padding: 10px">选择申请人</span>

                            <el-button
                                v-perms="['linkman:add']"
                                size="small"
                                type="primary"
                                @click="applicantAdd()"
                            >
                                <template #icon>
                                    <icon name="el-icon-Plus" />
                                </template>
                                新增申请人
                            </el-button>

                            <div style="padding: 0px 10px">
                                <el-checkbox-group
                                    v-model="queryParams.proposerid"
                                    @change="changeApplicant"
                                >
                                    <el-checkbox
                                        v-for="item in applicantData"
                                        :label="item.id"
                                        size="large"
                                        >{{ item.customerNameChinese }}</el-checkbox
                                    >
                                </el-checkbox-group>
                            </div>
                            <el-table class="mt-4" size="large" :data="applicantTableData" stripe>
                                <el-table-column label="案件类型" prop="caseType" min-width="100" />
                                <el-table-column
                                    label="申请人(中文)"
                                    prop="customerNameChinese"
                                    min-width="120"
                                />
                                <el-table-column
                                    label="申请人(英文)"
                                    prop="customerNameEnglish"
                                    min-width="120"
                                />
                                <el-table-column
                                    label="申请人编号"
                                    prop="applicantId"
                                    min-width="120"
                                />
                                <el-table-column label="所属地区" prop="nation" min-width="100" />
                                <el-table-column
                                    label="申请人地址"
                                    prop="streetChinese"
                                    min-width="120"
                                />

                                <el-table-column
                                    label="申请人地址(英文)"
                                    prop="streetEnglish"
                                    min-width="160"
                                />
                                <el-table-column label="证件号" prop="idNumber" min-width="100" />
                                <el-table-column
                                    label="创建日期"
                                    prop="creationDate"
                                    min-width="120"
                                />
                                <el-table-column label="创建人" prop="creator" min-width="100" />
                                <el-table-column
                                    label="费减备案"
                                    prop="feeReductionFiling"
                                    min-width="100"
                                />
                                <el-table-column label="总委托书编号" prop="id" min-width="140" />
                                <el-table-column
                                    label="邮编"
                                    prop="cepctPostcode"
                                    min-width="100"
                                />

                                <el-table-column label="操作" width="120" fixed="right">
                                    <template v-slot="scope">
                                        <el-button
                                            @click="
                                                moveRow(
                                                    applicantTableData,
                                                    scope.row,
                                                    scope.$index,
                                                    'up'
                                                )
                                            "
                                            size="mini"
                                            type="text"
                                            :icon="Top"
                                            :disabled="scope.$index === 0"
                                        >
                                        </el-button>
                                        <el-button
                                            @click="
                                                moveRow(
                                                    applicantTableData,
                                                    scope.row,
                                                    scope.$index,
                                                    'down'
                                                )
                                            "
                                            size="mini"
                                            type="text"
                                            :icon="Bottom"
                                            :disabled="
                                                scope.$index === applicantTableData.length - 1
                                            "
                                        >
                                        </el-button>
                                        <el-button type="danger" link @click="handleAdd()">
                                            <template #icon>
                                                <el-icon>
                                                    <Close />
                                                </el-icon>
                                            </template>
                                        </el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                    </div>
                </div>
                <div>
                    <div style="display: flex; border: 1px solid #f2f2f2">
                        <div class="namebox">
                            <span style="white-space: nowrap">发明人信息</span>
                        </div>
                        <div style="padding: 10px; width: 85%">
                            <span style="padding: 10px">选择发明人</span>
                            <el-button
                                v-perms="['linkman:add']"
                                size="small"
                                type="primary"
                                @click="inventorAdd()"
                            >
                                <template #icon>
                                    <icon name="el-icon-Plus" />
                                </template>
                                添加发明人
                            </el-button>
                            <div style="padding: 0px 10px">
                                <el-checkbox-group
                                    v-model="queryParams.inventorInformationid"
                                    @change="changeInventor"
                                >
                                    <el-checkbox
                                        v-for="item in inventorData"
                                        :label="item.id"
                                        size="large"
                                        >{{ item.chineseName }}</el-checkbox
                                    >
                                </el-checkbox-group>
                            </div>
                            <el-table class="mt-4" size="large" :data="inventorTableData" stripe>
                                <el-table-column type="selection" width="55" />
                                <el-table-column label="ID" prop="id" min-width="50" />

                                <el-table-column
                                    label="客户名称"
                                    prop="customerName"
                                    min-width="110"
                                >
                                    <template #default="{ row }">
                                        <span @click="handleEditcopy(row)" style="color: #409eff">
                                            {{ row.customerName }}</span
                                        >
                                    </template>
                                </el-table-column>
                                <el-table-column label="姓名" prop="chineseName" min-width="110" />
                                <el-table-column
                                    label="英文名"
                                    prop="englishName"
                                    min-width="100"
                                />
                                <el-table-column label="国别(地区)" prop="nation" min-width="110" />
                                <el-table-column label="地址(英文)" prop="nation" min-width="110" />
                                <el-table-column label="身份证号" prop="idNumber" min-width="110" />
                                <el-table-column label="工号" prop="idNumber" min-width="110" />
                                <el-table-column label="联系电话" prop="phone" min-width="110" />
                                <el-table-column label="邮件" prop="email" min-width="110" />
                                <el-table-column
                                    label="创建时间"
                                    prop="createTime"
                                    min-width="100"
                                />
                                <el-table-column label="创建人员" prop="creator" min-width="100" />
                                <el-table-column label="操作" width="120" fixed="right">
                                    <template v-slot="scope">
                                        <el-button
                                            @click="
                                                moveRow(
                                                    inventorTableData,
                                                    scope.row,
                                                    scope.$index,
                                                    'up'
                                                )
                                            "
                                            size="mini"
                                            type="text"
                                            :icon="Top"
                                            :disabled="scope.$index === 0"
                                        >
                                        </el-button>
                                        <el-button
                                            @click="
                                                moveRow(
                                                    inventorTableData,
                                                    scope.row,
                                                    scope.$index,
                                                    'down'
                                                )
                                            "
                                            size="mini"
                                            type="text"
                                            :icon="Bottom"
                                            :disabled="
                                                scope.$index === inventorTableData.length - 1
                                            "
                                        >
                                        </el-button>
                                        <el-button type="danger" link @click="handleAdd()">
                                            <template #icon>
                                                <el-icon>
                                                    <Close />
                                                </el-icon>
                                            </template>
                                        </el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                    </div>
                </div>
            </el-form>
        </el-card>
        <linkmanEditPopup
            v-if="linkmanshowEdit"
            ref="linkmaneditRef"
            @success="getLists"
            @close="linkmanshowEdit = false"
        />
        <applicantEditPopup
            v-if="applicantshowEdit"
            ref="applicanteditRef"
            @success="getLists"
            @close="applicantshowEdit = false"
        />
        <inventorEditPopup
            v-if="inventorshowEdit"
            ref="inventoreditRef"
            @success="getLists"
            @close="inventorshowEdit = false"
        />
    </div>
</template>
<script lang="ts" setup name="copyright">
import { copyrightDelete, copyrightLists } from '@/api/copyright'
import { usePaging } from '@/hooks/usePaging'
import feedback from '@/utils/feedback'
import baseVue from './component/baseVue.vue'
import applicatVue from './component/applicatVue.vue'
import inventorVue from './component/inventorVue.vue'
import { linkmanAlls } from '@/api/linkman'
import { applicantAll } from '@/api/applicant'
import { inventorAll } from '@/api/inventor'
import { Top, Close, Bottom } from '@element-plus/icons-vue'
import linkmanEditPopup from '@/views/client/clientData/component/linkman/edit.vue'
import applicantEditPopup from '@/views/client/clientData/component/applicantList/edit.vue'
import inventorEditPopup from '@/views/client/clientData/component/inventorList/edit.vue'
import { customerNameFoAll } from '@/api/customer/customerColList'

// import EditPopup from './edit.vue'
// const editRef = shallowRef<InstanceType<typeof EditPopup>>()
// const showEdit = ref(false)

const queryParams = reactive({
    id: '',
    proposition: '',
    proposalName: '',
    clientName: '',
    reputationGrade: '',
    businessPersonnel: '',
    businessAssistant: '',
    internalSecurityPeople: '',
    caseType: '版权',
    searchman: '',
    searchTimeStart: '',
    searchTimeEnd: '',
    externalCaseSource: '',
    secondCaseSource: '',
    caseTypeid: '',
    businessPersonnelid: '',
    customerContactid: [],
    proposerid: [],
    inventorInformationid: [],
    isTechnicalDisclosure: '',
    isBopis: '',
    userId: '',
    userName: '',
    searchTime: ''
})

const { pager, getLists, resetPage, resetParams } = usePaging({
    fetchFun: copyrightLists,
    params: queryParams
})

const radio1 = ref('1')
const radio2 = ref('1')

// const handleAdd = async () => {
//     showEdit.value = true
//     await nextTick()
//     editRef.value?.open('add')
// }

// const handleEdit = async (data: any) => {
//     showEdit.value = true
//     await nextTick()
//     editRef.value?.open('edit')
//     editRef.value?.getDetail(data)
// }

const formRules = {
    proposalName: [
        {
            required: true,
            message: '请输入提案名称',
            trigger: ['blur']
        }
    ],
    clientName: [
        {
            required: true,
            message: '请输入客户名称',
            trigger: ['blur']
        }
    ],
    businessPersonnel: [
        {
            required: true,
            message: '请输入业务人员',
            trigger: ['blur']
        }
    ]
}
const optionNames = ref([])
//获取所有客户名称
const getCustomerName = async () => {
    const data = await customerNameFoAll()
    optionNames.value = data
}
const linkmanshowEdit = ref(false)
const linkmaneditRef = shallowRef<InstanceType<typeof linkmanEditPopup>>()

const applicantshowEdit = ref(false)
const applicanteditRef = shallowRef<InstanceType<typeof applicantEditPopup>>()

const inventorshowEdit = ref(false)
const inventoreditRef = shallowRef<InstanceType<typeof inventorEditPopup>>()

const linkmanAdd = async () => {
    linkmanshowEdit.value = true
    await nextTick()
    linkmaneditRef.value?.open('add')
}

const applicantAdd = async () => {
    applicantshowEdit.value = true
    await nextTick()
    applicanteditRef.value?.open('add')
}
const inventorAdd = async () => {
    inventorshowEdit.value = true
    await nextTick()
    inventoreditRef.value?.open('add')
}

const queryParamsLinkman = reactive({
    caseType: '版权',
    customerMianId: 0
})

const queryParamsApplicant = reactive({
    caseType: '版权',
    customerId: 0
})
const handleClientName = (val: number) => {
    queryParamsLinkman.customerMianId = val
    queryParamsApplicant.customerId = val
    queryParamsInventor.customerId = val
    if (val) {
        getLinkmanList()
        getApplicantList()
        getInventorList()
    }
}
const queryParamsInventor = reactive({
    customerId: 0
})
const linkmanData = ref([])
const applicantData = ref([])
const inventorData = ref([])
const likemanTableData = ref([])
const applicantTableData = ref([])
const inventorTableData = ref([])
const getLinkmanList = async () => {
    const data = await linkmanAlls(queryParamsLinkman)
    linkmanData.value = data
}
const changeLinkman = async () => {
    likemanTableData.value = linkmanData.value.filter((item) =>
        queryParams.customerContactid.includes(item.id)
    )
}
const getApplicantList = async () => {
    const data = await applicantAll(queryParamsApplicant)
    applicantData.value = data
}

const changeApplicant = async () => {
    applicantTableData.value = applicantData.value.filter((item) =>
        queryParams.proposerid.includes(item.id)
    )
}

const getInventorList = async () => {
    const data = await inventorAll(queryParamsInventor)
    inventorData.value = data
}

const changeInventor = async () => {
    inventorTableData.value = inventorData.value.filter((item) =>
        queryParams.inventorInformationid.includes(item.id)
    )
}
const moveRow = (tabeldate: any, row: any, index: any, direction: string) => {
    // 计算目标索引
    const targetIndex = direction === 'up' ? index - 1 : index + 1

    // 边界判断
    if (targetIndex < 0 || targetIndex >= tabeldate.length) return

    // 移动数据
    const temp = tabeldate[index]
    tabeldate[index] = tabeldate[targetIndex]
    tabeldate[targetIndex] = temp
}

const handleDelete = async (id: number) => {
    await feedback.confirm('确定要删除？')
    await copyrightDelete({ id })
    feedback.msgSuccess('删除成功')
    getLists()
}
getCustomerName()
getLists()
</script>
